<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>树形组件</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <link rel="stylesheet" href="./leftAndRightSelectTree.css">
    <script src="../../res/layui/layui.js"></script>
</head>
<body>

<div>
    <!--展示弹窗中设置的数据-->
    <div>
        城市：<input id="valueHolderOnFather" readonly="readonly">
        <button id="showChildWindowBtn">选择城市</button>
    </div>

    <!--弹窗中的内容-->
    <div id="chileWindow" style="display: none;width: 500px;height: 400px;margin: 0 auto;">
        <!--选择树-->
        <div style="height: 300px;overflow-y: auto;padding: 10px;">
            <div id="cityTree"></div>
        </div>
        <!--按钮框-->
        <div id="btnBox" style="text-align: right;margin-top: 10px;padding: 10px;">
            <span id="cancelBtn" class="layui-btn layui-btn-primary layui-btn-sm">取消</span>
            <span id="confirmBtn" class="layui-btn layui-btn-sm">确定</span>
        </div>
    </div>
</div>


<script>
    layui.use(['jquery', 'tree'], function () {
        var $ = layui.jquery;
        var tree = layui.tree;

        /**
         * 点击事件：弹出子页面
         */
        $("#showChildWindowBtn").click(function () {
            layer.open({
                type: 1,
                title: "请选择城市",
                //area: ['400px', '450px'],
                fixed: false,
                maxmin: true,
                content: $("#chileWindow")
            });
        });

        // 渲染选择树
        var testData = [
            {
                "field": "sheng",
                "id": "fj",
                "title": "福建",
                "children": [{"field": "shi", "id": "np", "title": "南平"}, {"field": "shi", "id": "fz", "title": "福州"}, {"field": "shi", "id": "xm", "title": "厦门"}]
            },
            {
                "field": "sheng",
                "id": "zj",
                "title": "浙江",
                "children": [{"field": "shi", "id": "jh", "title": "金华"}, {"field": "shi", "id": "wz", "title": "温州"}, {"field": "shi", "id": "hz", "title": "杭州"}]
            },
            {
                "field": "sheng",
                "id": "gz",
                "title": "广州",
                "children": [{"field": "shi", "id": "dg", "title": "东莞"}, {"field": "shi", "id": "sz", "title": "深圳"}, {"field": "shi", "id": "zh", "title": "珠海"}]
            }
        ];
        tree.render({
            id: "myTree",
            elem: '#cityTree',
            showCheckbox: true,
            data: testData,
            oncheck: function (obj) {
                if (obj.checked) {
                    console.log("勾选");
                    if (obj.data.field === "sheng") {
                        // 选中的是父节点
                        console.log("父节点");
                        console.log(obj.data.children);
                    } else {
                        // 选中的是子节点
                        console.log("子节点");
                        console.log(obj.data);
                    }

                } else {
                    console.log("取消");
                    if (obj.data.field === "sheng") {
                        // 取消的是父节点
                        console.log("父节点");
                        console.log(obj.data.children);
                    } else {
                        // 取消的是子节点
                        console.log("子节点");
                        console.log(obj.data);
                    }
                }
            }
        });

        $("#confirmBtn").click(function () {
            var cityStr = '';
            var provinces = tree.getChecked("myTree");
            provinces.forEach(province => {
                province.children.forEach(city => {
                    cityStr = cityStr + ',' + city.title;
                });
            });

            $('#valueHolderOnFather').val(cityStr);
        });

    });
</script>

</body>
</html>
